<template>
  <a-modal :width="1200" body-style="padding: 0 20px 20px" v-model:visible="showTransferLog" :title="`仓内库存调拨记录-${searchVal.warehouseName}/${searchVal.sku}`" top="8vh" title-align="start" :footer="false" :mask-closable="false" @cancel="closedDialog">
    <div class="filter-w flex">
      <div class="item">
        <span class="label">时间</span>
        <a-range-picker size="small" v-model="searchTimes" style="width: 250px" allow-clear valueFormat="YYYY-MM-DD HH:mm:ss" :timePickerProps="{ defaultValue: ['00:00:00', '23:59:59'] }" />
      </div>
      <div class="item">
        <span class="label">操作人</span>
        <a-input size="small" v-model="searchVal.createUname" placeholder="操作人" allow-clear style="width: 80px" />
      </div>
      <div class="item">
        <span class="label">店铺</span>
        <a-input size="small" v-model="searchVal.shopName" placeholder="店铺" allow-clear style="width: 180px" />
      </div>
      <div class="item">
        <span class="label">MSKU</span>
        <a-input size="small" v-model="searchVal.mskus" placeholder="MSKU" allow-clear style="width: 180px" />
      </div>
      <div class="item">
        <span class="label">类型</span>
        <a-select size="small" v-model="searchVal.transType" style="width: 80px">
          <a-option value="" label="全部" />
          <a-option :value="1" label="调入" />
          <a-option :value="-1" label="调出" />
        </a-select>
      </div>
      <a-button type="primary" size="small" @click="searchByVal">查询</a-button>
    </div>
    <a-table
      class="table-singe-line"
      :loading="tableLoading"
      :data="tableList"
      :scroll="{
        y: 'calc(84vh - 200px)',
      }"
      size="mini"
      :bordered="false"
      :pagination="false"
    >
      <template #columns>
        <a-table-column data-index="warehouseName" title="仓库" :width="140" />
        <a-table-column data-index="sku" title="SKU" :width="140" />
        <a-table-column title="时间" :width="140">
          <template #cell="{ record }">
            <p>{{ $setTime(record.gmtCreate) }}</p>
          </template>
        </a-table-column>
        <a-table-column data-index="createUname" title="操作人" :width="70" />
        <a-table-column data-index="currentShopName" title="店铺" :width="140" />
        <a-table-column data-index="msku" title="MSKU" :width="140" />
        <a-table-column title="调入/调出" :width="140">
          <template #cell="{ record }">
            <p>{{ record.transType == 1 ? '调入' : '调出' }}</p>
          </template>
        </a-table-column>
        <a-table-column data-index="targetShopName" title="目标" :width="140" />
        <a-table-column data-index="amt" title="数量" :width="70" />
        <a-table-column title="单价" :width="100">
          <template #cell="{ record }">
            <p>￥{{ record.price }}</p>
          </template>
        </a-table-column>
        <a-table-column title="货值" :width="100">
          <template #cell="{ record }">
            <p>￥{{ record.value }}</p>
          </template>
        </a-table-column>
      </template>
    </a-table>
    <div class="pagination-footer">
      <a-pagination size="mini" :total="total" :default-page-size="searchVal.pageSize" :current="searchVal.pageNum" :page-size-options="[20, 50, 100, 200, 300]" show-total show-page-size @page-size-change="sizeChange" @change="changePage" />
    </div>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { findTransOrderInnerPageByParam } from '@/api/warehouse'
  import { Message } from '@arco-design/web-vue'

  onMounted(() => {
    getTableList()
  })
  const emit = defineEmits(['closed'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    currentItem: {
      type: Object,
      default: () => {},
    },
    warehouse: {
      type: Object,
      default: () => {},
    },
  })
  const showTransferLog = ref(props.isShow)

  const searchVal = ref<any>({
    pageSize: 20,
    pageNum: 1,
    transType: '',
    warehouseCode: props.warehouse?.warehouseCode,
    warehouseName: props.warehouse?.warehouseName,
    sku: props.currentItem.sku,
  })
  const searchTimes = ref<Array<string>>([])
  const total = ref(0)
  const tableLoading = ref(false)
  const tableList = ref<Array<any>>([])

  // 分页
  function changePage(val: number) {
    searchVal.value.pageNum = val
    getTableList()
  }
  function sizeChange(val: number) {
    searchVal.value.pageSize = val
    getTableList()
  }
  function searchByVal() {
    searchVal.value.pageNum = 1
    getTableList()
  }
  // 获取商品列表
  async function getTableList() {
    tableList.value = []
    let _searchVal = JSON.parse(JSON.stringify(searchVal.value))
    console.log(_searchVal)
    if (!_searchVal.sku || !_searchVal.warehouseCode) {
      Message.error('请输入仓库名称和SKU查询')
      return []
    }
    if (searchTimes.value?.length) {
      _searchVal.dataType = 'gmtCreate'
      _searchVal.startDate = searchTimes.value[0]
      _searchVal.endDate = searchTimes.value[1]
    }
    tableLoading.value = true
    const res: any = await findTransOrderInnerPageByParam(_searchVal)
    tableLoading.value = false
    tableList.value = res?.data?.records || []
    total.value = res?.data?.total || 0
  }
  // 关闭
  function closedDialog() {
    emit('closed')
  }
</script>
<style lang="less">
  .filter-w {
    margin-top: 10px;
    flex-wrap: wrap;
    .label {
      flex-shrink: 0;
      margin-right: 4px;
    }
    .item {
      display: flex;
      align-items: center;
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
</style>
